﻿<div class="ui-widget-content">
    <h3>Resizable - Efeitos</h3>
    <p>É possível fazer-se com que o redimensionamento de um elemento redimensione outro(s) elemento(s) por meio da opção alsoResize:</p>
    <div id="resizable_also" class="resizable_na_tab" style="float: left">
        <strong>Redimensionamento com alsoResize</strong> - <span class="codigo">$("#meu_resizable").resizable({alsoResize: "#outro_elemento"});</span>
    </div>
    <div class="resizable_na_tab outro_elemento" style="background-color: gray; color: white; float: left; margin-left: 8px">
        Este aqui é um <span class="codigo">outro_elemento</span>.
    </div>
    <div class="resizable_na_tab outro_elemento" style="background-color: gray; color: white; float: left; margin-left: 8px">
        E este aqui é mais um <span class="codigo">outro_elemento</span>.
    </div>
    <div style="clear: both"></div>
    <p>Com a opção helper, uma guia de redimensionamento surge:</p>
    <div id="resizable_helper" class="resizable_na_tab" style="background-color: rgb(255,192,192)">
        <strong>Redimensionamento com helper</strong> - <span class="codigo">$("#meu_resizable").resizable({helper: "helper-verde"});</span>
    </div>
    <p>
        Existem também os efeitos ghost e animate, que utilizam helpers. Caso a helper não seja definida, a classe CSS
        <span class="codigo">ui-resizable-helper</span> será usada.
    </p>
    <div class="resizable_na_tab outro_elemento" style="background-color: gray; color: white; float: left">
        Mais um que redimensiona junto.
    </div>
    <div id="resizable_ghost" class="resizable_na_tab" style="background-color: green; color: yellow; float: left; margin-left: 8px">
        <strong>Redimensionamento ghost</strong> - <span class="codigo">$("#meu_resizable").resizable({ghost: true});</span>
    </div>
    <div id="resizable_animate" class="resizable_na_tab" style="background-color: rgb(192,192,255); float: left; margin-left: 8px">
        <strong>Redimensionamento animate</strong> - <span class="codigo">$("#meu_resizable").resizable({animate: true, helper: "helper-verde"});</span>
    </div>
    <div style="clear: both"></div>
    <script type="text/javascript">
        inicializador.resizableEfeitos = function() {
            $("#resizable_ghost").resizable({ghost: true}).css({width: 180, height: 140});
            $("#resizable_animate").resizable({animate: true, helper: "helper-verde"}).css({width: 180, height: 140});
            $("#resizable_helper").resizable({helper: "helper-verde"}).css({width: 680, height: 30});
            $("#resizable_also").resizable({alsoResize: ".outro_elemento"}).css({width: 120, height: 80});
            $(".outro_elemento").css({width: 120, height: 80});
        };
    </script>
</div>